<button id="dec">-</button>
<span id="count">0</span>
<button id="inc">+</button>

<script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>
<!-- 
  执行流程：
    view视图 => Active => => Reducer函数 => Store => view视图...
    
      view视图提供了Active(也就是点击按钮触发的动作)，Active会往Reducer函数中去，
    每次active更新都会形成一个state,产生新的state会再返回到我们的view视图中去
 -->

<script>
  //1.定义reducer函数
  // 作用: 根据不同的action对象，返回不同的新的state
  // state: 管理的数据初始状态
  // action:对象 type 标记当前想要做什么样的修改
  function reducer(state = { count: 0 }, action) {
    // 数据不可变: 基于原始状态生成一个新的状态
    if (action.type === "INC") {
      return { count: state.count + 1 };
    }
    if (action.type === "DEC") {
      return { count: state.count - 1 };
    }
    return state;
  }

  //2.使用reducer函数生成store实例
  const store = Redux.createStore(reducer);

  //3.通过store实例的subscribe订阅数据变化
  //回调函数可以在每次状态发生变化的时候自动执行
  store.subscribe(() => {
    console.log("state变化了");
    document.getElementById("count").innerText = store.getState().count
  });

  //4.通过store实例的dispatch函数提交action更改状态
  //增
  const incBtn = document.getElementById("inc");
  //{type: "INC",} 表示一个active对象
  incBtn.addEventListener("click", () => {
    store.dispatch({
      type: "INC",
    });
  });

  //减
  const disBtn = document.getElementById("dec");
  disBtn.addEventListener("click", () => {
    store.dispatch({
      type: "DEC",
    });
  });

  //5.通过store实例的getState方法获取最新状态更新到视图中
</script>
